<template>
  <div class="content">
    <div class="content-main">
      <el-row :gutter="20">
        <el-col :span="16" :offset="0">
          <Echart :options="option" width="100%" height="800px" />
        </el-col>
        <el-col :span="8" :offset="0" pt60px>
          <el-select
            v-model="selectedAlliance"
            class="alliance-select"
            size="large"
            filterable
            popper-class="alliance-select-dropdown"
          >
            <el-option
              v-for="item in allianceList"
              :key="item.id"
              :label="item.centreName"
              :value="item.id"
            />
          </el-select>
          <div class="alliance-list" v-if="unitList">
            <el-scrollbar max-height="600px">
              <el-radio-group v-model="selectedUnit" class="unit-list" @change="handleUnitChange">
                <el-radio v-for="(item, index) in unitList" :key="index" :label="index" border>{{
                  item.title
                }}</el-radio>
              </el-radio-group>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { cmsCentreBlurb, cmsCentreBlurbDetailsDetail } from '@/api'
import { Echart } from '@/components/Echart'
import yangze_map from '@/assets/geo/yangze_map'

let data = yangze_map.features.map((item) => {
  return {
    name: item.properties.name
  }
})

let option = ref({
  backgroundColor: 'transparent',
  geo: [
    {
      map: '长三角',
      aspectScale: 1,
      zoom: 0.55,
      layoutCenter: ['50%', '50%'],
      layoutSize: '180%',
      show: true,
      roam: false,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#c0f3fb',
          borderWidth: 1,
          shadowColor: '#8cd3ef',
          shadowOffsetY: 10,
          shadowBlur: 120,
          areaColor: 'transparent'
        }
      }
    }
    // 重影
    // {
    //   type: 'map',
    //   map: '长三角',
    //   zlevel: -1,
    //   aspectScale: 1,
    //   zoom: 0.55,
    //   layoutCenter: ['50%', '51%'],
    //   layoutSize: '180%',
    //   roam: false,
    //   silent: true,
    //   itemStyle: {
    //     normal: {
    //       borderWidth: 1,
    //       // borderColor:"rgba(17, 149, 216,0.6)",
    //       borderColor: 'rgba(58,149,253,0.8)',
    //       shadowColor: 'rgba(172, 122, 255,0.5)',
    //       shadowOffsetY: 5,
    //       shadowBlur: 15,
    //       areaColor: 'rgba(5,21,35,0.1)'
    //     }
    //   }
    // },
    // {
    //   type: 'map',
    //   map: '长三角',
    //   zlevel: -4,
    //   aspectScale: 1,
    //   zoom: 0.55,
    //   layoutCenter: ['50%', '52%'],
    //   layoutSize: '180%',
    //   roam: false,
    //   silent: true,
    //   itemStyle: {
    //     normal: {
    //       borderWidth: 5,
    //       // borderColor: "rgba(11, 43, 97,0.8)",
    //       borderColor: 'rgba(5,9,57,0.8)',
    //       shadowColor: 'rgba(29, 111, 165,0.8)',
    //       shadowOffsetY: 15,
    //       shadowBlur: 10,
    //       areaColor: 'rgba(5,21,35,0.1)'
    //     }
    //   }
    // }
  ],
  series: [
    {
      name: '长三角市数据',
      type: 'map',
      map: '长三角', // 自定义扩展图表类型
      aspectScale: 1,
      zoom: 0.55, // 缩放
      showLegendSymbol: true,
      label: {
        normal: {
          show: false,
          textStyle: { color: '#fff', fontSize: '120%' }
        },
        emphasis: {
          show: false
        },
        active: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          areaColor: {
            type: 'linear',
            x: 1200,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
              }
            ],
            global: true // 缺省为 false
          },
          borderColor: '#fff',
          borderWidth: 0.2
        },
        emphasis: {
          show: false,
          color: '#fff',
          areaColor: 'rgba(0,254,233,0.6)'
        },
        active: {
          show: false,
          color: '#fff',
          areaColor: 'rgba(0,254,233,0.6)'
        }
      },
      layoutCenter: ['50%', '50%'],
      layoutSize: '180%',
      markPoint: {
        symbol: 'none'
      },
      data: data
    }
  ]
})
let regionOption = ref([])
let mapOption = computed(() => {
  return {}
})

const selectedAlliance = ref('')
const selectedUnit = ref('')
const allianceList = ref([])
const unitList = ref([])
watch(selectedAlliance, (val) => {
  if (val) {
    getUnitList(val)
  } else {
    unitList.value = []
  }
})
watch(selectedUnit, (val) => {
  if (val) {
    // getList()
  }
})
function getList() {
  // const dictData = store.getters.dictionary;
  // console.log("dictData:", dictData);
  cmsCentreBlurb({
    pageNum: 1,
    pageSize: 1000,
    orderBys: [{ fieldName: 'sort', order: 'ASC' }]
  }).then((res) => {
    allianceList.value = res.data.list
    selectedAlliance.value = res.data.list[0].id
  })
}

function getUnitList(id) {
  regionOption.value = []
  cmsCentreBlurbDetailsDetail({
    id: id
  }).then((res) => {
    unitList.value = res.data.centerMemberInfoModels || []
    if (unitList.value.length > 0) {
      selectedUnit.value = 0
      unitList.value.map((item) => {
        if (item.latitude && item.longitude) {
          regionOption.value.push({
            name: item.title,
            value: [item.longitude, item.latitude, 323]
          })
        }
      })
    } else {
      selectedUnit.value = ''
    }
    setMapOption()
  })
}

function setMapOption() {
  // option.value.series[0].data = regionOption.value
  let lineData = []
  for (let i = 0; i < regionOption.value.length; i++) {
    if (i < regionOption.value.length - 1) {
      let firstItem = regionOption.value[0]
      let item = regionOption.value[i]
      let nextItem = regionOption.value[i + 1]
      let fromCoord = [firstItem.value[0], firstItem.value[1]]
      let toCoord = [nextItem.value[0], nextItem.value[1]]
      lineData.push([fromCoord, toCoord])
    }
  }
  console.log('🚀 ~ setMapOption ~ lineData:', lineData)
  let result = [
    {
      type: 'lines',
      zlevel: 2,
      // effect: {
      //   show: false,
      //   period: 4, //箭头指向速度，值越小速度越快
      //   trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
      //   symbol: 'arrow', //箭头图标
      //   symbolSize: 6 //图标大小
      // },
      lineStyle: {
        normal: {
          color: '#fff',
          width: 2, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 1, //尾迹线条曲直度
          shadowColor: '#fff',
          shadowBlur: 10
        }
      },
      data: lineData
      // [
      //   [points[0], points[1]],
      //   [points[1], points[2]],
      //   [points[2], points[3]]
      // ]
    },
    {
      // 动效散点公共配置项
      // silent: true, // 暂不支持鼠标交互
      type: 'effectScatter',
      coordinateSystem: 'geo',
      hoverAnimation: true,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        // brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 1 //波纹圆环最大限制，值越大波纹越大
      },
      showEffectOn: 'render',
      label: {
        normal: {
          show: false,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {
            //圆环显示文字
            return params.name
          },
          fontSize: 13,
          color: 'white'
        },
        select: {
          show: true
        }
      },
      selectedMode: 'single',
      select: {
        label: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: 15,
      itemStyle: {
        normal: {
          show: false,
          borderWidth: 1,
          color: '#fff'
        }
      },
      zlevel: 1,
      data: regionOption.value
    }
  ]
  // 重置series数组，只保留第一个基础地图series，避免数据叠加
  option.value.series = [option.value.series[0], ...result]
}
onMounted(() => {
  getList()
})

const handleUnitChange = (index) => {
  const selectedItem = unitList.value[index]
  if (selectedItem?.link) {
    window.open(selectedItem.link, '_blank')
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;
  background-color: #1c2025;

  .content-main {
    width: 1200px;
    min-height: 650px;
    margin: auto;
  }

  .alliance-select {
    width: 100%;
    margin-bottom: 20px;

    //调整为深色主题
    :deep(.el-select__wrapper) {
      background-color: rgba(0, 33, 79, 0.7);
      box-shadow: 0 0 0 1px #409eff;

      .el-select__selected-item {
        color: #fff;
        &::placeholder {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .alliance-list {
    background-color: rgba(0, 33, 79, 0.7);
    border: 1px solid #1890ff;
    border-radius: 4px;
    padding: 20px;
  }

  .unit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .unit-list :deep(.el-radio) {
    height: 40px;
    margin-right: 0;
    width: 100%;
    color: #fff;
    border: none;
    // border-color: rgba(24, 144, 255, 0.3);
  }

  .unit-list :deep(.el-radio.is-bordered.is-checked) {
    border-color: #1890ff;
    background-color: rgba(24, 144, 255, 0.2);
  }

  .unit-list :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #1890ff;
  }
}
</style>
<style lang="scss">
.alliance-select-dropdown {
  border: 1px solid #409eff !important;
  .el-select-dropdown {
    background-color: rgba(0, 33, 79, 0.7);
    border: 1px solid #409eff;
    .el-select-dropdown__wrap {
      background-color: rgba(0, 33, 79, 0.7);
    }
    .el-select-dropdown__item {
      color: #fff;
      background-color: transparent;

      &.hover,
      &:hover {
        background-color: rgba(64, 158, 255, 0.2);
      }

      &.selected {
        background-color: rgba(64, 158, 255, 0.4);
      }
    }
  }
}
</style>

<style lang="scss">
.alliance-select-dropdown {
  border: 1px solid #409eff !important;
  .el-select-dropdown {
    background-color: rgba(0, 33, 79, 0.7);
    border: 1px solid #409eff;
    .el-select-dropdown__wrap {
      background-color: rgba(0, 33, 79, 0.7);
    }
    .el-select-dropdown__item {
      color: #fff;
      background-color: transparent;

      &.hover,
      &:hover {
        background-color: rgba(64, 158, 255, 0.2);
      }

      &.selected {
        background-color: rgba(64, 158, 255, 0.4);
      }
    }
  }
}
</style>
